<template>
  <div class="msg_box">
    <div class="msg_box">
      <div class="msg">
        <b>
          {{msgInfo.msg}}
        </b>
      </div>
    </div>

    <img class="img1"
         src="../../assets/img/nav/a1.png" />
  </div>
</template>
<script>
export default {
  props: {
    toMsg: {}
  },
  data () {
    return {
      msgInfo: this.toMsg
    }
  }
}
</script>
<style lang="less" scoped>
.msg_box {
  width: 100%;
  display: flex;
  //   background-color: cadetblue;
  height: auto;
  max-height: 50%;
  margin-top: 10px;

  text-align: right;
  display: flex;
  justify-content: flex-end;
  .img1 {
    margin-top: 10px;
    height: 40px;
    width: 40px;
  }
  .msg_box {
    width: 100%;
    //  background-color: rgb(119, 32, 32);
  }
  .msg {
    //  width: 60%;
    max-width: 60%;
    margin-right: 10px;
    background-color: rgb(216, 181, 216);
    border-radius: 10px;
    padding: 10px;
    text-align: left;
    b {
      font-weight: normal;
      font-size: 13px;
      color: rgb(0, 0, 0);
    }
  }
}
</style>